<template>
  <view class="container">
    <view class="order_box" v-if="nowItem.id">
      <view class="card zhima-box">
        <view class="title-section mb-32 fs-36">
          <text class="fw-bold">芝麻免押:</text>
          <view class="status fw-bold"
                :class="{
                        'text-red': zhimaStatus[notify_detail.order_status].color === 'text-red',
                        'text-origin': zhimaStatus[notify_detail.order_status].color === 'text-origin',
                        'text-green': zhimaStatus[notify_detail.order_status].color === 'text-green',
                        'text-666': zhimaStatus[notify_detail.order_status].color === 'text-666'
                    }"
          >
            {{ zhimaStatus[notify_detail.order_status].text || '未免押' }}
            <view class="desc" v-if="notify_detail.order_status">{{ zhimaStatus[notify_detail.order_status].desc }}</view>
          </view>
        </view>
        <view class="divider"></view>
        <view v-if="notify_detail.order_status">
          <view class="title mb-40 fs-30">
            <text class="ebao-iconfont ebao-dongjiejine text-blue"></text>
            订单累计的冻结金额：<text class="text--w111-666">￥{{ notify_detail.total_freeze_amount }}</text>
          </view>
          <view class="form mb-40">
            <view class="form-item">
              <view class="form-label">累计冻结信用金额:</view>
              <view class="money">￥{{ notify_detail.total_freeze_credit_amount }}</view>
            </view>
            <view class="form-item">
              <view class="form-label">累计冻结自有资金金额:</view>
              <view class="money">￥{{ notify_detail.total_freeze_fund_amount }}</view>
            </view>
          </view>
          <view class="title mb-40 fs-30">
            <text class="ebao-iconfont ebao-zhifu text-green"></text>
            订单累计用于支付的金额：<text class="text--w111-666">￥{{ notify_detail.total_pay_amount }}</text>
          </view>
          <view class="form mb-40">
            <view class="form-item">
              <view class="form-label">累计支付信用金额:</view>
              <view class="money">￥{{ notify_detail.total_pay_credit_amount }}</view>
            </view>
            <view class="form-item">
              <view class="form-label">累计支付自有资金金额:</view>
              <view class="money">￥{{ notify_detail.total_pay_fund_amount }}</view>
            </view>
          </view>
          <view class="title mb-40 fs-30">
            <text class="ebao-iconfont ebao-shengyukeyongedu text-red"></text>
            订单当前剩余冻结金额：<text class="text--w111-666">￥{{ notify_detail.rest_amount }}</text>
          </view>
          <view class="form mb-64">
            <view class="form-item">
              <view class="form-label">剩余冻结信用金额:</view>
              <view class="money">￥{{ notify_detail.rest_credit_amount }}</view>
            </view>
            <view class="form-item">
              <view class="form-label">剩余冻结自有资金金额:</view>
              <view class="money">￥{{ notify_detail.rest_fund_amount }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="card mb-80">
        <view class="section">
          <view class="title-section fw-bold mb-64 fs-36">押金管理</view>
          <view class="divider"></view>
          <view class="title mb30">支付</view>
          <view class="form mt-20">
            <view class="form-item flex justify-between">
              <view class="form-label">押金：{{price}}</view>
              <view>
                <view class="btn-default btn-blue" @click="openQr">生成支付二维码</view>
                <view class="btn-default" @click="openEditDeposit">修改押金</view>
              </view>
            </view>
          </view>
        </view>
        <view class="section">
          <view class="title mb30">押金列表</view>
          <view class="table">
            <view class="item" v-for="(item,index) in list" :key="item.id">
              <view class="content">
                <view class="content-item">
                  <view class="l">ID</view>
                  <view class="r">{{item.id}}</view>
                </view>
                <view class="content-item">
                  <view class="l">金额</view>
                  <view class="r">{{item.money}}</view>
                </view>
                <view class="content-item">
                  <view class="l">支付宝订单号</view>
                  <view class="r">{{item.out_trade_no}}</view>
                </view>
                <view class="content-item">
                  <view class="l">退款订单号</view>
                  <view class="r">{{item.out_request_no}}</view>
                </view>
                <view class="content-item">
                  <view class="l">充值时间</view>
                  <view class="r">{{formatTime(item.add_time)}}</view>
                </view>
                <view class="content-item">
                  <view class="l">退款状态</view>
                  <view class="r">
                    <text v-if="item.status==2" class="text-origin">退款中</text>
                    <text v-else-if="item.status==3" class="text-green">退款成功</text>
                  </view>
                </view>
                <view class="btn-box flex justify-end">
                  <view class="btn-default" @click="openRefund(item)">
                    退款
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="section">
          <view class="title mb30">退款列表</view>
          <view class="table" v-if="refundList.length>0">
            <view class="item" v-for="item in refundList" :key="item.id">
              <view class="content">
                <view class="content-item">
                  <view class="l">ID</view>
                  <view class="r">{{item.id}}</view>
                </view>
                <view class="content-item">
                  <view class="l">退款金额</view>
                  <view class="r">{{item.refund_money}}</view>
                </view>
                <view class="content-item">
                  <view class="l">退款订单号</view>
                  <view class="r">{{item.out_request_no}}</view>
                </view>
                <view class="content-item">
                  <view class="l">退款时间</view>
                  <view class="r">{{formatTime(item.add_time)}}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 扫码支付弹窗 -->
      <uni-popup ref="qrPopModel" type="center" border-radius="20rpx 20rpx 0 0">
        <view class="uni-pop-box">
          <view class="title">请扫码支付</view>
          <view class="content qr-content">
            <view class="qr-box">
              <view class="alipay">
                <image :src="qrUrl" mode="aspectFit"></image>
                <text class="tip">支付宝扫码支付</text>
              </view>
            </view>
          </view>
          <view class="footer">
            <view class="btn cancel" @click="closeQr">关闭</view>
          </view>
        </view>
      </uni-popup>

      <!-- 修改押金弹窗 -->
      <uni-popup ref="editPopModel" type="center" border-radius="20rpx 20rpx 0 0">
        <view class="uni-pop-box">
          <view class="title">修改押金</view>
          <view class="content">
            <input type="text" v-model="editPrice" placeholder="请输入押金金额" class="flex-1 pl-20 fs-26" placeholder-class="text--w111-ccc"/>
          </view>
          <view class="footer">
            <view class="btn cancel" @click="closeEditDeposit">取消</view>
            <view class="btn confirm" @click="editDeposit">确定</view>
          </view>
        </view>
      </uni-popup>

      <!-- 押金退款弹窗 -->
      <uni-popup ref="refundPopModel" type="center" border-radius="20rpx 20rpx 0 0">
        <view class="uni-pop-box">
          <view class="title">押金退款</view>
            <view class="mb-32">提示：可全部退款，或者部分退款</view>
            <view class="flex">
              <view>押金退款：</view>
              <input v-model="refundMoney" placeholder="请输入退款金额" type="number" />
            </view>
          <view class="footer">
            <view class="btn cancel" @click="closeRefund">取消</view>
            <view class="btn confirm" @click="refundDepositOrder">确定</view>
          </view>
        </view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
import {
  depositList,
  depositRefundList, editDeposit,
  getAdminOrderDetail,
  getAdminRefundDetail, getStoreOrderDetail,
  getStoreRefundDetail, payDepositOrder, refundDepositOrder
} from "@/api/admin";
import {formatTime} from "../../../utils/order";

export default {
  data() {
    return {
      order_id:'',
      show:true,
      price: '',
      qrUrl:'',
      qrShow:false,
      list:[],
      columns:[
        { title: 'ID', key: 'id'},
        { title: '金额', key: 'money' },
        { title: '支付宝订单号', key: 'out_trade_no'},
        { title: '退款订单号', key: 'out_request_no'},
        { title: '充值时间', key: 'add_time',slot:'add_time' },
        { title: '退款状态', key: 'status',slot:'status' },
        { title: '操作', key: 'id',slot:'action' },
      ],
      refundColumns:[
        { title: 'ID', key: 'id'},
        { title: '退款金额', key: 'refund_money' },
        { title: '退款订单号', key: 'out_request_no'},
        { title: '退款时间', key: 'add_time',slot:'add_time' },
      ],
      refundShow:false,
      refundItem:{},
      refundMoney:0,
      refundList:[],

      editShow:false,
      editPrice:0,
      zhimaStatus:{
        NIT:{
          text:'未授权',
          desc:'初始状态，已创建未授权',
          color:'text-red'
        },
        AUTHORIZED:{
          text:'已授权',
          desc:'授权成功，可以进行转支付或解冻操作',
          color:'text-green'
        },
        FINISH:{
          text:'已完成',
          desc:'转支付完成且无剩余冻结资金',
          color:'text-green'
        },
        CLOSED:{
          text:'已关闭',
          desc:'关闭状态：授权未完成超时关闭或冻结资金全额解冻',
          color:'text-666'
        }
      },
      notify_detail:{},
      nowItem:{},
      statusType:''
    };
  },
  onLoad(options){
    if(options.order_id){
      this.statusType=options.statusType
      this.order_id=options.order_id
      this.getIndex()
    }

  },
  methods: {
    formatTime,
    getIndex: function() {
      let that = this;
      let obj = '';
      if (that.statusType == -3) {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminRefundDetail(that.order_id);
        }else{
          funApi = getStoreRefundDetail(that.order_id);
        }
        obj = funApi;
      } else {
        let funApi = '';
        if(this.storeNum){
          funApi = getAdminOrderDetail(that.order_id);
        }else{
          funApi = getStoreOrderDetail(that.order_id);
        }
        obj = funApi;
      }
      uni.showLoading({
        title: '加载中',
      })
      obj.then(res => {
        uni.hideLoading()
        that.nowItem = res.data;
        that.notify_detail=JSON.parse(that.nowItem.order_lease.notify_detail)
        console.log('芝麻免押信息',that.notify_detail)
        that.price = parseFloat(that.nowItem.order_lease.deposit)

        this.depositList()
      })
    },
    // 押金列表
    depositList(){
      depositList({
        type:1,
        order_id:this.nowItem.id,
      }).then(res=>{
        if(res.status===200){
          this.list=res.data
        }
      })
      depositRefundList({
        type:1,
        order_id:this.nowItem.id,
      }).then(res=>{
        if(res.status===200){
          this.refundList=res.data
        }
      })
    },

    // 二维码
    openQr(){
      payDepositOrder(this.nowItem.id, {
        money:this.price
      }).then(res=>{
        if(res.status===200){
          this.$refs.qrPopModel.open()
          this.qrUrl=res.data.alipay_trade_precreate_response.qr_code
        }
      })
    },
    closeQr(){
      this.$refs.qrPopModel.close()
    },


    // 打开修改押金
    openEditDeposit() {
      this.editPrice=this.price
      this.$refs.editPopModel.open()
    },
    // 关闭修改押金
    closeEditDeposit(){
      this.$refs.editPopModel.close()
    },
    // 修改押金
    editDeposit() {
      if (this.editPrice <= 0) {
        uni.showToast({
          title: '押金金额必须大于0',
          icon: 'none'
        });
        return;
      }
      editDeposit(this.nowItem.id, {
        deposit:this.editPrice
      }).then(res=>{
        if(res.status===200){
          this.closeEditDeposit()
          this.price = this.editPrice;
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          });
        }
      })
    },

    // 退款
    openRefund(item){
      this.refundItem=item
      this.$refs.refundPopModel.open()
    },
    closeRefund(){
      this.$refs.refundPopModel.close()
    },
    refundDepositOrder() {
      if (this.refundMoney <= 0) {
        uni.showToast({
          title: '退款金额必须大于0',
          icon: 'none'
        });
        return;
      }
      uni.showLoading({
        title: '加载中',
      })
      refundDepositOrder(this.refundItem.id, {
        money:this.refundMoney
      }).then(res=>{
        if(res.status===200){
          this.closeRefund()
          this.depositList()
          uni.hideLoading()
          uni.showToast({
            title: '退款成功',
            icon: 'success'
          });
        }
      })
    },
  }
};
</script>

<style lang="less" scoped>
.form-item{
  margin-bottom: 20rpx;
}

.container {
  padding: 20rpx;
}

.order_box {
  padding-bottom: 100rpx;
}

.card {
  padding: 30rpx 20rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 40rpx;
  .title {
    padding-left: 20rpx;
    border-left: 6rpx solid #1890FF;
    line-height: 30rpx;
    color: #303133;
  }
  .title-section {
    padding-left: 20rpx;
    border-left: 6rpx solid #ff9900;
    line-height: 30rpx;
    color: #303133;
    display: flex;
    align-items: center;
    font-size: 36rpx;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
.divider{
  border-bottom: 1rpx solid  #eee;
  margin: 50rpx 0;
}
.zhima-box {
  .title-section {
    display: flex;
    margin-bottom: 60rpx;
    .status {
      margin-left: 40rpx;
      position: relative;
    }
    .desc {
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #999;
      position: absolute;
    }

  }
  .title {
    display: flex;
    align-items: center;
    .ebao-iconfont {
      margin-right: 12rpx;
    }
    .ebao-dongjiejine {
      font-size: 48rpx;
    }
    .ebao-zhifu {
      font-size: 48rpx;
    }
    .ebao-shengyukeyongedu {
      font-size: 48rpx;
    }
  }
  .form-item {
    margin-bottom: 20rpx;
    padding-left: 30rpx;
    .form-label {
      font-size: 28rpx;
    }
  }
  .money {
    font-weight: bold;
    font-size: 28rpx;
  }
}

.qr-box {
  display: flex;
  justify-content: center;
  padding: 40rpx;
  image {
    width: 400rpx;
    height: 400rpx;
  }
  .alipay {
    display: flex;
    flex-direction: column;
    align-items: center;
    .tip {
      font-size: 32rpx;
      font-weight: bold;
      margin-top: 20rpx;
      color: #2d8cf0;
    }
  }
}

input {
  color: #333;
  font-size: 28rpx;
  height: 60rpx;
  padding: 0 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
}

.table {
  width: 100%;
  border-collapse: collapse;
  .table-header {
    display: flex;
    background-color: #f5f5f5;
    .table-cell {
      padding: 20rpx;
      border: 1rpx solid #ddd;
      font-size: 28rpx;
    }
  }
  .table-row {
    display: flex;
    .table-cell {
      padding: 20rpx;
      border: 1rpx solid #ddd;
      font-size: 28rpx;
    }
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-content {
    background-color: #fff;
    padding: 40rpx;
    border-radius: 20rpx;
    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .alert {
      margin-bottom: 36rpx;
      font-size: 28rpx;
      color: #ccc;
    }
  }
}
.pop-box{
  width: 90vw;
  max-height: 80vh;
  padding: 30rpx;
  border-radius: 28rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  .main{
    flex-direction: column;
    display: flex;
    flex: 1;
    overflow: hidden;
    .tip{
      color: #999;
      margin-top: 10rpx;
    }
  }
  .title{
    font-size: 30rpx;
    margin-bottom: 30rpx;
    font-weight: bold;
  }
  .content{
    flex: 1;
    overflow-y: auto;
    border: 1rpx solid #ddd;
    border-radius: 20rpx;
    .item{
      margin-bottom: 20rpx;
      border-bottom: 1rpx solid #ddd;;
      padding: 10rpx;
      &:last-child{
        border-bottom: none;
      }
    }
    .item-con{
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      &:last-child{
        margin-bottom: 0 !important;
      }
      .l{
        white-space: nowrap;
        flex: 0 0 160rpx;
      }
      .r{
        flex:1;
        padding-right: 30rpx;
      }
    }
  }
  .add-box{
    margin-top: 20rpx;
    .item{
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .l{
        white-space: nowrap;
        flex: 0 0 160rpx;
      }
      .r{
        flex:1;
      }
    }
  }
  .footer{
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
    .btn{
      padding: 0 50rpx;
      line-height: 60rpx;
      border-radius: 28rpx;
    }
    .cancel{
      color: #333;
      border: 1rpx solid #CCCCCC;
      margin-right: 30rpx;
    }
    .confirm{
      color: #fff;
      background: #1497fa;
    }
  }
}

.table{
  background:#fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;
  .title{
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .item{
    border: 1rpx solid #ddd;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
  }
  .content{
    .content-item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .l{
        white-space: nowrap;
        padding-right: 20rpx;
      }
    }
    .btn-box{
      display: flex;
      flex-wrap: wrap;
    }
    .other{
      border-top: 1rpx solid #ddd;
      padding-top: 12rpx;
      color: #999;
    }
    .remark{
      color: #999;
    }
  }
}
</style>